function addLoadEvent(func){
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
		window.onload = func;
	}else{
		window.onload = function(){
			oldonload();
			func();
		}
	}

}



//对移动元素的函数进行抽象
function moveElement(elementID,final_x,final_y,interval){
	if (!document.getElementById) return false;
	if (!document.getElementById(elementID)) return false;

	var elem = document.getElementById(elementID);
	if (elem.movement){                             //清除Timeout，防止动画元素拉扯
		clearTimeout(elem.movement);
	}
	var xpos = parseInt(elem.style.left);
	var ypos = parseInt(elem.style.top);
	var dist = 0;

	
	if (xpos == final_x && ypos == final_y){
		return true;
	}
	if (xpos < final_x){
		dist = Math.ceil((final_x - xpos)/10);
		xpos = xpos + dist;
	}
	if (xpos > final_x){
		dist = Math.ceil((xpos - final_x)/10);
		xpos = xpos - dist;
	}
	if (ypos < final_y){ 
		dist = Math.ceil((ypos - final_y)/10);
		ypos = ypos + dist;
	}
	if (ypos > final_y){
		dist = Math.ceil((final_y - ypos)/10);
		ypos = ypos - dist;
	}
	elem.style.left = xpos + "px";
	elem.style.top = ypos + "px";
	var repeat = "moveElement('"+elementID+"','"+final_x+"','"+final_y+"','"+interval+"')";
	elem.movement = setTimeout(repeat,interval);
}

function prepareSlideshow(){

	//生成HTML标记
	var preview = document.createElement("div");
	preview.setAttribute("id","preview");
	console.log(preview);

	var img = document.createElement("ul");
	img.setAttribute("id","img");
	preview.appendChild(img);

	var img_li_1 = document.createElement("li");
	img.appendChild(img_li_1);

	var img_img_1 = document.createElement("img");
	img_img_1.setAttribute("src","images/img-1.png");
	img_li_1.appendChild(img_img_1);

	var img_li_2 = document.createElement("li");
	img.appendChild(img_li_2);

	var img_img_2 = document.createElement("img");
	img_img_2.setAttribute("src","images/img-2.png");
	img_li_2.appendChild(img_img_2);

	var img_li_3 = document.createElement("li");
	img.appendChild(img_li_3);

	var img_img_3 = document.createElement("img");
	img_img_3.setAttribute("src","images/img-3.png");
	img_li_3.appendChild(img_img_3);

	var img_li_4 = document.createElement("li");
	img.appendChild(img_li_4);

	var img_img_4 = document.createElement("img");
	img_img_4.setAttribute("src","images/img-4.png");
	img_li_4.appendChild(img_img_4);

	var list = document.getElementById("linklist");
	list.appendChild(preview);

	//检测元素是否存在

	if (!document.getElementById) return false;
	if (!document.getElementById("img")) return false;
	if (!document.getElementsByTagName) return false;
	if (!document.getElementsByTagName("li")) return false;

	
	//声明变量
	var elem = document.getElementById("img");
	img.style.position = "absolute";
	img.style.left = "0px";
	img.style.top = "0px";

	var list = document.getElementById("link");
	var links = document.getElementsByTagName("li");

	links[0].onmouseover = function(){
		moveElement("img",0,0,10)
	}
	links[1].onmouseover = function(){
		moveElement("img",-200,0,10)
	}
	links[2].onmouseover = function(){
		moveElement("img",-400,0,10)
	}
	links[3].onmouseover = function(){
		moveElement("img",-600,0,10)
	}

}


addLoadEvent(prepareSlideshow);



// function positionMessage(){
// 	if (!document.getElementById) return false;
// 	if (!document.getElementById("message")) return false;
// 	var elem = document.getElementById("message");
// 	elem.style.position = "absolute";
// 	elem.style.left = "50px";
// 	elem.style.top = "50px";
// 	//movement = setTimeout("moveMessage()",10);   //未使用var声明，意味着可以在positionMessage函数以外的地方取消setTimeout
// }

//瞬间移动
// function moveMessage(){
// 	if (!document.getElementById) return false;
// 	if (!document.getElementById("message")) return false;
// 	var elem = document.getElementById("message");
// 	elem.style.position = "absolute";
// 	elem.style.left = "500px";
// }




//一点一点移动
// function moveMessage(){
// 	if (!document.getElementById) return false;
// 	if (!document.getElementById("message")) return false;

// 	var elem = document.getElementById("message");
// 	var xpos = parseInt(elem.style.left);
// 	var ypos = parseInt(elem.style.top);
// 	if (xpos == 500 && ypos == 300){
// 		return true;
// 	}
// 	if (xpos < 500){
// 		xpos++;
// 	}
// 	if (xpos > 500){
// 		xpos--;
// 	}
// 	if (ypos < 300){
// 		ypos++;
// 	}
// 	if (ypos > 300){
// 		ypos--;
// 	}
// 	elem.style.left = xpos + "px";
// 	elem.style.top = ypos + "px";
// 	movement = setTimeout("moveMessage()",10);
// }
















